<template>
  <el-dialog
    :title="state.title"
    @close="handleClose"
    width="600"
    v-model="state.visible"
    :before-close="beforeClose"
    :loading="state.loading"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
  >
    <el-form label-width="150px" :model="form" :rules="rules" ref="formRef">
      <el-row>
        <el-col :span="22">
          <el-form-item :label="t('system.smsConfig.aliyun.accessKeyId')" prop="accessKeyId">
            <el-input v-model="form.accessKeyId" :placeholder="t('system.smsConfig.aliyun.placeholder.accessKeyId')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item :label="t('system.smsConfig.aliyun.accessKeySecret')" prop="accessKeySecret">
            <el-input v-model="form.accessKeySecret" :placeholder="t('system.smsConfig.aliyun.placeholder.accessKeySecret')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item :label="t('system.smsConfig.aliyun.endpoint')" prop="sender">
            <el-input v-model="form.endpoint" :placeholder="t('system.smsConfig.aliyun.placeholder.endpoint')" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose" :loading="state.loading">{{t('crud.cancelText')}}</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="state.loading">{{t('crud.confirmText')}}</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>

import { changeProperties } from '@/api/system/smsConfig'
import {FormInstance, FormRules} from 'element-plus'
import {useI18n} from 'vue-i18n'
const { t } = useI18n()

const emits = defineEmits(['success'])

const formRef = ref<FormInstance>()

const id = ref<string>()

const state = reactive({
  visible: false,
  loading: false,
  title: t('system.smsConfig.nikita.action.setProperties'),
})

const form = ref<any>({
  accessKeyId: '',
  accessKeySecret: '',
  endpoint: '',
})

const rules = reactive<FormRules>({
  accessKeyId: [{ required: true, message: t('system.smsConfig.aliyun.validator.accessKeyId'), trigger: 'blur' }],
  accessKeySecret: [{ required: true, message: t('system.smsConfig.aliyun.validator.accessKeySecret'), trigger: 'blur' }],
  endpoint: [{ required: true, message: t('system.smsConfig.aliyun.validator.endpoint'), trigger: 'blur' }],
})


const openDialog = (row?: any) => {
  state.visible = true
  id.value = row.id
  form.value = Object.assign({}, JSON.parse(row.properties))
}

const handleClose = () => {
  state.visible = false
}
const handleSubmit = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      state.loading = true
      let data = Object.assign({}, { id: id.value, properties: JSON.stringify(form.value)})
      await changeProperties(data).finally(() => (state.loading = false))
      ElMessage.success(t('operate.tooltip.success'))
      handleClose()
      emits('success', data)
    }
  })
}

const beforeClose = (done: () => void) => {
  done()
}
defineExpose({
  openDialog,
})
</script>
